<template>
    <div>
        <div class="go-back" @click="goBack">
            <van-icon name="arrow-left" size="30"/>
        </div>
        <!--搜索框-->
        <div class="search-box">
            <van-search
                    v-model="value"
                    show-action
                    placeholder="让我来告诉你"
                    @search="onSearch"
                    @click="goSearch"
            >
                <div slot="action" @click="onSearch(value)">搜索</div>
            </van-search>
        </div>
        <!--搜索结果-->
        <div class="search-result">
            <van-cell v-for="(item,index) in newsList" :key="index">
                <router-link tag="div" :to="{name:'details',params:{articleId:item.articleId}}">
                    {{item.title}}
                </router-link>
            </van-cell>
        </div>
        <!--搜索记录-->
        <div class="search-history" v-show="historyShow">
            <van-tag
                    v-for="(item,index) in searchHistoryList"
                    :key="index"
                    closeable
                    size="large"
                    plain
                    @close="close(index)"
                    @click="toSearch(item)"
            >
                {{item}}
            </van-tag>
        </div>
        <!--历史上的今天新闻列表-->
        <div class="hot-news" v-show="hotShow">
            <h3>历史上的今天</h3>
            <van-cell v-for="(item,index) in historyTodayList" :key="index">
                <router-link tag="div" :to="{name:'historyDetails',params:{index:index}}">
                    <div class="num">{{index+1}}</div>{{item.title}}
                </router-link>
            </van-cell>
        </div>
    </div>
</template>

<script>
    import {search} from '../api/CMS-api'
    import {historyToday} from '../api/CMS-api'
    export default {
        created(){
            const searchHistoryStr = localStorage.getItem('searchHistory') || '[]';
            this.searchHistoryList = JSON.parse(searchHistoryStr);
            //获取当前日期
            const date = new Date();
            const month = date.getMonth()+1;
            const day = date.getDate();
            historyToday('eed9a7a326471393', month, day).then(res => {
                this.historyTodayList = res.result
            });
        },
        data(){
            return{
                value:'',
                newsList:[],
                hotNewsList:[],
                searchHistoryList:[],
                historyShow:true,
                hotShow:true,
                historyTodayList:[]
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            toSearch(item) {
                this.hotShow = false;
                this.value = item;
                this.onSearch();
            },
            clear() {
                this.historyShow = true;
                this.newsList = [];
            },
            onSearch(value){
                if (this.value == ""){
                    return
                }else{
                    search(value).then(res => {
                        if (res.rows != null || res.rows.length != 0) {
                            this.historyShow = false;
                        }
                        this.newsList = res.rows;
                    });
                }
                const searchHistoryStr = localStorage.getItem("searchHistory") || "[]";
                const searchHistoryList = JSON.parse(searchHistoryStr);
                if (!searchHistoryList.includes(this.value)) {
                    searchHistoryList.push(this.value);
                }else {
                    this.searchHistoryList = searchHistoryList;
                }
                localStorage.setItem("searchHistory", JSON.stringify(searchHistoryList));
            },
            close(index) {
                this.searchHistoryList.splice(index, 1);
                localStorage.setItem("searchHistory", JSON.stringify(this.searchHistoryList));
            },
            goSearch(){
                this.hotShow = false;
            }
        }
    }
</script>

<style lang="less" scoped>
    .go-back {
        width: 10%;
        float: left;
        margin-top: 22px;
    }
    .search-box {
        width: 90%;
        float: right;
        margin-top: 10px;
    }
    .search-history {
        margin: 0 20px;
    }
    .hot-news {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 100px;
        left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        h3 {
            font-weight: normal;
            color: #f34f4f;
            font-style: italic;
            margin-left: 30px;
        }
        .num {
            float: left;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #f34f4f;
            text-align: center;
            color: white;
            font-style: italic;
            margin-right: 5px;
        }
    }
</style>